<template>
  <div class="stationDetail">
      <div style="width: 1200px; padding: 20px 0; margin: 0 auto">
        <a-breadcrumb separator=">">
            <a-breadcrumb-item href="" @click.native="$router.push('/')">首页</a-breadcrumb-item>
            <a-breadcrumb-item href="" @click.native="$router.push('/employment/home')"> 创业就业 </a-breadcrumb-item>
            <a-breadcrumb-item style="color: #FFBE37;">工作类别</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="detailMessage">
          <div class="station">
              <img :src="imageWebUrl + stationDetail.picture" @error="$event.target.src = GLOBAL.defaultCover" alt="">
              <div class="right">
                  <p class="title">{{stationDetail.name}}</p>
                  <p class="content">{{stationDetail.detail}}</p>
              </div>
          </div>
          <div class="RelevantPolicies" v-show="stationDetail.suppoPolicy || stationDetail.policyList && stationDetail.policyList.length">
              <p class="title"><span></span>相关政策</p>
              <p class="remark" v-if="stationDetail.suppoPolicy" v-html="stationDetail.suppoPolicy.split('\n').join('<br/>')"></p>
              <p class="link" v-show="stationDetail.policyList && stationDetail.policyList.length">全文:<a v-for="(item,index) in stationDetail.policyList" :key="index" target="_blank" :href="item.webUrl">{{item.webName}}</a></p>
          </div>
      </div>
      <ul class="jobs">
          <li v-for="(item, inom) in nommtrain" :key="inom">
            <p class="workTitle">{{ item.name }}</p>
            <div class="msg">
              <div
                class="welfare"
                @click="
                  $router.push(
                    '/employment/positionDetail?jobCode=' + item.jobCode
                  )
                "
              >
                <div class="navs">
                  <p class="maney">
                    <template v-if="item.payType == 1">
                        {{ item.minPay }}<span v-show="item.minPay && item.maxPay">K-</span>{{ item.maxPay }}<span v-show="item.minPay && item.maxPay">K</span>/月
                    </template>
                    <template v-else-if="item.payType == 2">
                        {{ item.maxPay }}元/日
                    </template>
                    <template v-else-if="item.payType == 3"> 面议 </template>
                  </p>
                  <div class="nav">
                    <p>{{ item.degree }}</p>
                    <p class="line">|</p>
                    <p>{{ item.workExper }}</p>
                    <p class="line">|</p>
                    <p>{{ item.disaType }}</p>
                  </div>
                </div>
                <div class="treatment" v-if="item.welfare">
                  <p v-for="i in item.welfare.split('、')" :key="i + 'h'">{{ i }}</p>
                </div>
              </div>
              <div class="company"  @click="$router.push('/education/detailsBusiness?id=' + item.comCode)">
                <img
                  :src="imageWebUrl + item.comLogo"
                  @error="$event.target.src = GLOBAL.defaultIconImg"
                  alt=""
                  class="worklogo"
                />
                <div class="synopsis">
                  <p class="companyname">{{ item.comName }}</p>
                  <p class="synop">
                    {{ item.comNature }} <span v-show="item.comNature">|</span> {{ item.comTrade }} <span v-show="item.comTrade && item.scale">|</span>
                    {{ item.scale }}
                  </p>
                </div>
              </div>
              <div class="links" v-show="item.couseList || item.webName">
                <div class="dlex1-div" style="margin-bottom:50px;">
                  <span class="greyBlue" v-if="item.couseList!=''"> 相关课程：</span>
                  <span class="greyBlue">
                      <!-- <span v-show="item.couseList && !item.couseList.length">无</span> -->
                    <a v-show="item.couseList && item.couseList.length"
                      v-for="(iovm, index) in item.couseList"
                      :key="index + 'hg'"
                      @click="getJumpVideo(iovm)"
                      class="txta1"
                      >{{ iovm.name }}</a
                    >
                  </span>
                </div>
                <!-- 最右侧样式 -->
                <div class="dlex1-div">
                    <span
                    class="greyBlue lineSingle"
                    v-if="item.webName"
                    style="width: 295px"
                    >相关政策：<a
                        class="ams"
                        v-if="item.webUrl"
                        :href="item.webUrl"
                         target="_blank"
                        >{{ item.webName }}</a
                    >
                    <span v-else>{{ item.webName }}</span></span
                    >
                </div>
              </div>
            </div>
          </li>
      </ul>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>

<script>
export default {
    data(){
        return {
            nommtrain:[],
            code:"",
            stationDetail:{},
            onLoading:false
        }
    },
    created(){
        this.code = this.$route.query.id;
        this.getStationDetail();
        this.gerMargeList();
    },
    computed:{
        texts(){
            return this.stationDetail.suppoPolicy.split('\n').join('<br/>')
        }
    },
    methods:{
        // 跳转视频播放页
        getJumpVideo(e) {
        this.$router.push(
            "/video/detailsVideo?courseNo=" +
            e.courseNo +
            "&learnedTime=" +
            e.learnedTime
        );
        },
        getStationDetail(){
            this.onLoading = true
            this.$ajax({
                url:"/entrepreneurial/jobcategory/get",
                method:"post",
                params:{
                    code:this.code
                }
            }).then((res)=>{
                if(res.code == 200){
                    this.onLoading = false
                    this.stationDetail = res.data;
                }else{
                    this.onLoading = false
                }
            })
        },
        gerMargeList(){
            this.$ajax({
                url:"/entrepreneurial/comjob/morgeList",
                method:"post",
                params:{
                    jobType:this.code,
                    orderType: 1, // 排序   1 最新 2最热
                    pageIndex:1,
                    pageSize:4
                }
            }).then((res)=>{
                if(res.code == 200){
                    this.nommtrain = res.data.list;
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
    .stationDetail{
        background-color: #F8F8F8;
        .detailMessage{
            width: 1200px;
            margin: 0 auto;
            padding: 16px 24px 22px 16px;
            background-color: #ffffff;
            .station{
                display: flex;
                padding-bottom: 16px;
                border-bottom: 1px solid #EEEEEE;
                img{
                    width: 269px;
                    height: 175px;
                }
                .right{
                    flex: 1;
                    padding-left: 25px;
                    .title{
                        font-weight: bold;
                        font-size: 20px;
                        line-height: 28px;
                        color: #333333;
                        margin-top: 6px;
                    }
                    .content{
                        height: 120px;
                        overflow: hidden;
                        margin-top: 16px;
                        font-size: 15px;
                        line-height: 28px;
                        color: #333333;
                    }
                    .content:hover{
                        overflow: auto;
                    }
                }
            }
            .RelevantPolicies{
                margin-top: 24px;
                .title{
                    color: #333333;
                    line-height: 25px;
                    font-size: 18px;
                    font-weight: bold;
                    span{
                        display: inline-block;
                        width: 2px;
                        height: 10px;
                        background-color: #FFBE37;
                        margin-right: 6px;
                    }
                }
                .remark{
                    margin-top: 16px;
                    color: #333333;
                    line-height: 28px;
                    font-size: 15px;
                }
                .link{
                    margin-top: 9px;
                    color: #333333;
                    line-height: 21px;
                    font-size: 15px;
                    a{
                        display: inline-block;
                        margin-left: 20px;
                        color: #0D4FAE;
                    }
                }
            }
        }
    }
    .jobs{
        width: 1200px;
        margin: 0 auto;
        margin-top: 20px;
        display: block;
        li {
            background-color: #ffffff;
            padding: 30px 20px 15px;
            display: block;
            margin: 0 auto;
            margin-bottom: 16px;
            box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.07);
            .workTitle {
            color: #333333;
            font-size: 18px;
            line-height: 25px;
            font-weight: bold;
            }
            .msg {
            margin-top: 16px;
            display: flex;
            padding-bottom: 21px;
            align-items: center;
            .welfare {
                cursor: pointer;
                overflow: hidden;
                margin-right: 89px;
                .navs {
                height: 25px;
                display: flex;
                align-items: center;
                .maney {
                    color: #FFBE37;
                    font-size: 18px;
                    line-height: 25px;
                }
                .nav {
                    display: flex;
                    margin-left: 24px;
                    p {
                    color: #666666;
                    font-size: 12px;
                    line-height: 17px;
                    }
                    .line {
                    margin: 0 20px;
                    }
                }
                }
                .treatment {
                display: flex;
                margin-top: 16px;
                p {
                    padding: 0 15px;
                    color: #FFBE37;
                    font-size: 12px;
                    line-height: 22px;
                    text-align: center;
                    // background: #FFE9D9;
                    // border-radius: 2px;
                    border: 1px solid #FFBE37;
                    margin-right: 16px;
                    // cursor: pointer;
                }
                }
            }
            .company {
                display: flex;
                .worklogo {
                width: 60px;
                height: 50px;
                }
                .synopsis {
                margin-left: 19px;
                padding-top: 3px;
                .companyname {
                    color: #000000;
                    font-size: 13px;
                    line-height: 18px;
                }
                .synop {
                    margin-top: 10px;
                    color: #999999;
                    font-size: 12px;
                    line-height: 17px;
                }
                }
            }
            }
            .links {
            // display: flex;
            height: 70px;
            border-left: #eeeeee 1px solid;
            margin-left: 25px;
            padding-left: 40px;
            p {
                margin-right: 40px;
                color: #333333;
                font-size: 12px;
                line-height: 17px;
                span {
                display: inline-block;
                margin-left: 8px;
                color: #0d4fae;
                text-decoration: underline;
                }
            }
            }
        }
    }
</style>
